import React from "react";
import { useNavigate } from "react-router-dom";

import './login.scss'
import type { FormProps } from "antd";
import { Button, Form, Input, message } from 'antd'


import { userLogin } from '@/api/login'
import SM4 from './sm4.js'


export const Component: React.FC = () =>{
  const navigate = useNavigate()

  const onFinish: FormProps['onFinish'] = async (values) => {
    let sm4Config = {
      //配置sm4参数
      key: "administrator@cn", //这里这个key值是跟后端要的
      mode: "cbc", // 加密的方式有两种，ecb和cbc两种，也是看后端如何定义的，不过要是cbc的话下面还要加一个iv的参数，ecb不用
      iv: "administrator@cn",
      cipherType: "base64",
    };
    let sm4 = new SM4(sm4Config);
    values.password = sm4.encrypt(values.password)
    console.log(navigate)
    const res:any = await userLogin(values)
    if(res.statusCode === 200){
       sessionStorage.setItem("token", res.data.caNo)
       navigate('/home',{ replace: true })
    }else{
      console.log(1)
       message.error('用户名或者密码错误！')
    }
  }
  
  const onFail: FormProps['onFinishFailed'] = (values) => {
  
  }

  
  return(
    <div className="longinContainer">
      <div className="loginBox">
        <div className="loginHeader">登录</div>

        <Form labelCol={{span:6}} wrapperCol={{span:16}} onFinish={onFinish} onFinishFailed={onFail}>
          <Form.Item label={<label style={{color:'#fff'}}>用户</label>} name="username"
            rules={[{required:true,message:'请输入用户名!'}]}
          >
             <Input size="large" />
          </Form.Item>

          <Form.Item label={<label style={{color:'#fff'}}>密码</label>} name="password"
            rules={[{required:true,message:'请输入密码!'}]}
          >
             <Input.Password size="large" />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
            <Button size="large"  type="primary" htmlType="submit" style={{width:'100%'}}>
              登录
            </Button>
          </Form.Item>
        </Form>

      </div>
    </div>
  )
}

